<template>
	<div class="app-container">
		<el-form
			v-show="showSearch"
			ref="queryForm"
			:model="queryParams"
			:inline="true"
			label-width="68px"
		>
			<el-form-item :label="$t('terminal.identification')" prop="deviceCode">
				<el-input
					v-model="queryParams.deviceCode"
					:placeholder="$t('terminal.identificationInput')"
					clearable
					size="small"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item :label="$t('terminal.name')" prop="deviceName">
				<el-input
					v-model="queryParams.deviceName"
					:placeholder="$t('terminal.nameInput')"
					clearable
					size="small"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item :label="$t('terminal.downLoadStatus')" prop="status">
				<el-select
					v-model="queryParams.status"
					:placeholder="$t('terminal.downLoadStatusInput')"
					clearable
					size="small"
				>
					<el-option
						v-for="dict in statusOptions"
						:key="dict.value"
						:label="dict.label"
						:value="dict.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					@click="handleQuery"
					>{{ $t('elButton.search') }}</el-button
				>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
					$t('elButton.reset')
				}}</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					v-hasPerm="['download_resend']"
					type="primary"
					icon="el-icon-s-promotion"
					size="mini"
					:disabled="multiple"
					@click="handleResend"
					>{{ $t('edition.reissue') }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPerm="['download_edit']"
					type="success"
					icon="el-icon-edit"
					size="mini"
					:disabled="single"
					@click="handleEdit"
					>{{ $t('elButton.change') }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPerm="['download_del']"
					type="danger"
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDel"
					>{{ $t('elButton.delete') }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPerm="['download_export']"
					type="warning"
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					>{{ $t('elButton.export') }}
				</el-button>
			</el-col>
			<div class="top-right-btn">
				<el-tooltip
					class="item"
					effect="dark"
					:content="$t('elButton.refresh')"
					placement="top"
				>
					<el-button
						size="mini"
						circle
						icon="el-icon-refresh"
						@click="handleQuery"
					/>
				</el-tooltip>
				<el-tooltip
					class="item"
					effect="dark"
					:content="
						showSearch ? $t('elButton.hideSearch') : $t('elButton.showSearch')
					"
					placement="top"
				>
					<el-button
						size="mini"
						circle
						icon="el-icon-search"
						@click="showSearch = !showSearch"
					/>
				</el-tooltip>
			</div>
		</el-row>

		<el-table
			v-loading="loading"
			:data="downloadList"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55" align="center" />
			<!-- <el-table-column :label="$t('equipment.number')" width="60" align="center" prop="id" /> -->
			<el-table-column
				:label="$t('terminal.identification')"
				align="center"
				prop="deviceCode"
				:show-overflow-tooltip="true"
			/>
			<el-table-column
				:label="$t('terminal.name')"
				align="center"
				prop="deviceName"
				:show-overflow-tooltip="true"
			/>
			<el-table-column
				:label="$t('equipment.channelName')"
				align="center"
				prop="schedulingName"
				:show-overflow-tooltip="true"
			/>
			<el-table-column
				:label="$t('program.programNumber')"
				align="center"
				prop="programId"
			/>
			<el-table-column
				:label="$t('equipment.programName')"
				align="center"
				prop="programName"
				:show-overflow-tooltip="true"
			/>
			<el-table-column
				:label="$t('equipment.channelMode')"
				align="center"
				prop="playMode"
			>
				<template slot-scope="scope">
					<el-tag v-if="scope.row.playMode == '0'" type="info">{{
						$t('equipment.channelMode1')
					}}</el-tag>
					<el-tag v-if="scope.row.playMode == '1'" type="success">{{
						$t('equipment.channelMode2')
					}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column
				:label="$t('program.playTime')"
				align="center"
				prop="duration"
			/>
			<!--<el-table-column :label="$t('terminal.planDownLoadTime')" align="center" prop="dloadTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.dloadTime) }}</span>
        </template>
      </el-table-column>-->
			<el-table-column
				:label="$t('program.distributionTimes')"
				align="center"
				prop="dloadTimes"
			/>
			<el-table-column
				:label="$t('program.distributionStatus')"
				align="center"
				prop="status"
				:formatter="statusFormat"
			/>
			<el-table-column
				:label="$t('equipment.remarks')"
				align="center"
				prop="remarks"
				:show-overflow-tooltip="true"
			/>
			<el-table-column
				:label="$t('equipment.control')"
				align="center"
				class-name="small-padding fixed-width"
				width="150"
				fixed="right"
			>
				<template slot-scope="scope">
					<el-button
						v-hasPerm="['download_progress']"
						size="mini"
						type="text"
						icon="el-icon-download"
						@click="handleProgress(scope.row)"
						>{{ $t('edition.downLoadProgress') }}
					</el-button>
					<el-button
						v-hasPerm="['download_del']"
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDel(scope.row)"
						>{{ $t('elButton.delete') }}
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.current"
			:limit.sync="queryParams.size"
			@pagination="getList"
		/>

		<!-- 添加或修改节目下载对话框 -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			:modal-append-to-body="true"
			:append-to-body="true"
		>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-row>
					<el-col :span="24">
						<el-form-item
							:label="$t('terminal.channelNumber')"
							prop="schedulingId"
						>
							<el-input-number
								v-model="form.schedulingId"
								controls-position="right"
								:min="0"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item
							:label="$t('equipment.channelName')"
							prop="schedulingName"
						>
							<el-input
								v-model="form.schedulingName"
								:placeholder="$t('equipment.channelNameInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('terminal.number')" prop="deviceId">
							<el-input
								v-model="form.deviceId"
								:placeholder="$t('terminal.numberInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item
							:label="$t('terminal.identification')"
							prop="deviceCode"
						>
							<el-input
								v-model="form.deviceCode"
								:placeholder="$t('terminal.identificationInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('terminal.name')" prop="deviceName">
							<el-input
								v-model="form.deviceName"
								:placeholder="$t('terminal.nameInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('program.programNumber')" prop="programId">
							<el-input-number
								v-model="form.programId"
								controls-position="right"
								:min="0"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item
							:label="$t('equipment.programName')"
							prop="programName"
						>
							<el-input
								v-model="form.programName"
								type="textarea"
								:placeholder="$t('journal.journalInfoInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('equipment.playStyle')" prop="playMode">
							<el-input
								v-model="form.playMode"
								:placeholder="$t('equipment.playStyleInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('terminal.totalTime')" prop="duration">
							<el-input
								v-model="form.duration"
								:placeholder="$t('terminal.totalTimeInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('equipment.forCompany')" prop="deptId">
							<el-input
								v-model="form.deptId"
								:placeholder="$t('equipment.forCompanyInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('equipment.company')" prop="deptName">
							<el-input
								v-model="form.deptName"
								:placeholder="$t('equipment.companyInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item
							:label="$t('terminal.planDownLoadTime')"
							prop="dloadTime"
						>
							<el-date-picker
								v-model="form.dloadTime"
								clearable
								size="small"
								style="width: 0px"
								type="date"
								value-format="yyyy-MM-dd"
								:placeholder="$t('terminal.planDownLoadTimePicker')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item
							:label="$t('program.distributionTimes')"
							prop="dloadTimes"
						>
							<el-input-number
								v-model="form.dloadTimes"
								controls-position="right"
								:min="0"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('terminal.downLoadStatus')">
							<el-select
								v-model="form.status"
								:placeholder="$t('terminal.downLoadStatusInput')"
							>
								<el-option
									v-for="dict in statusOptions"
									:key="dict.value"
									:label="dict.label"
									:value="dict.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">{{
					$t('submitText')
				}}</el-button>
				<el-button @click="cancel">{{ $t('cancelText') }}</el-button>
			</div>
		</el-dialog>

		<!-- 下载进度对话框 -->
		<el-dialog
			:title="$t('edition.downLoadProgress')"
			class="dialog"
			:visible.sync="dOpen"
			:modal-append-to-body="true"
			:append-to-body="true"
		>
			<el-row :gutter="10">
				<el-col :span="24" style="margin-bottom: 10px;">
					<div class="top-right-btn">
						<el-tooltip
							class="item"
							effect="dark"
							:content="$t('elButton.refresh')"
							placement="top"
						>
							<el-button
								size="mini"
								circle
								icon="el-icon-refresh"
								@click="getResDload"
							/>
						</el-tooltip>
					</div>
				</el-col>
				<el-col :span="24" style="margin-bottom: 10px;">
					<el-table
						v-loading="loadingP"
						:data="resDloadList"
						style="width: 100%"
						:border="true"
						:stripe="true"
					>
						<el-table-column
							:label="$t('equipment.number')"
							align="center"
							prop="id"
						/>
						<!--<el-table-column label="下载id" align="center" prop="dloadId"/>-->
						<el-table-column
							:label="$t('program.programNumber')"
							align="center"
							prop="programId"
						/>
						<el-table-column
							:label="$t('edition.materialNumber')"
							align="center"
							prop="materialId"
						/>
						<el-table-column
							:label="$t('equipment.identification')"
							align="center"
							prop="deviceCode"
							:show-overflow-tooltip="true"
						/>
						<el-table-column
							:label="$t('edition.downLoadNumber')"
							align="center"
							prop="dloadTimes"
						/>
						<el-table-column
							:label="$t('edition.downLoadProgress')"
							align="center"
							prop="dloadProgress"
						/>
						<el-table-column
							:label="$t('program.status')"
							align="center"
							prop="status"
						>
							<template slot-scope="scope">
								<el-tag v-if="scope.row.status == '0'" type="warning">{{
									$t('edition.downLoadStatus1')
								}}</el-tag>
								<el-tag v-if="scope.row.status == '1'" type="success">{{
									$t('edition.downLoadStatus2')
								}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column
							:label="$t('equipment.updateTime')"
							align="center"
							prop="updateTime"
							width="180"
							:show-overflow-tooltip="true"
						>
							<template slot-scope="scope">
								<span>{{ parseTime(scope.row.updateTime) }}</span>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
import {
	listDownload,
	getDownload,
	delDownload,
	addDownload,
	editDownload,
	exportDownload,
	resend,
} from '@/api/ips/download'
import { resDloadList } from '@/api/ips/resDload'

export default {
	name: 'Download',
	data() {
		return {
			// 遮罩层
			loading: true,
			loadingP: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 总条数
			total: 0,
			// 节目下载表格数据
			downloadList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 是否显示弹出层
			dOpen: false,
			resDloadList: [],
			dloadId: undefined,
			// 日期范围
			dateRange: [],
			// 下载状态字典
			statusOptions: [], // 查询参数
			queryParams: {
				current: 1,
				size: 10,
				deviceCode: undefined,
				deviceName: undefined,
				programName: undefined,
				status: undefined,
			},
			// 显示搜索条件
			showSearch: true,
			// 表单参数
			form: {},
			// 表单校验
			rules: {},
			deviceCode: '', // 当前设备标识
		}
	},
	created() {
		this.getList()
		this.getDicts('send_status').then((response) => {
			this.statusOptions = response.data
		})
	},
	methods: {
		/** 查询节目下载列表 */
		getList() {
			this.loading = true
			listDownload(this.addDateRange(this.queryParams, this.dateRange)).then(
				(response) => {
					this.downloadList = response.data
					this.total = response.total
					this.loading = false
				}
			)
		},
		// 下载状态字典翻译
		statusFormat(row, column) {
			return this.selectDictLabel(this.statusOptions, row.status)
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.reset()
		},
		// 表单重置
		reset() {
			this.form = {
				id: undefined,
				schedulingId: undefined,
				schedulingName: undefined,
				deviceId: undefined,
				deviceCode: undefined,
				deviceName: undefined,
				programId: undefined,
				programName: undefined,
				playMode: undefined,
				duration: undefined,
				deptId: undefined,
				deptName: undefined,
				dloadTime: undefined,
				dloadTimes: undefined,
				status: undefined,
				remarks: undefined,
			}
			this.resetForm('form')
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.current = 1
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm')
			this.handleQuery()
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset()
			this.open = true
			this.title = this.$t('program.addProgramDownload')
		},
		/** 修改按钮操作 */
		handleEdit(row) {
			this.reset()
			const id = row.id || this.ids
			getDownload(id).then((response) => {
				this.form = response.data
				this.open = true
				this.title = this.$t('program.changeProgramDownload')
			})
		},
		/** 提交按钮 */
		submitForm: function() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.form.id !== undefined) {
						editDownload(this.form).then((response) => {
							if (response.code === 0) {
								this.msgSuccess(this.$t('loginLog.changeSuccess'))
								this.open = false
								this.getList()
							} else {
								this.msgError(response.msg)
							}
						})
					} else {
						addDownload(this.form).then((response) => {
							if (response.code === 0) {
								this.msgSuccess(this.$t('addSuccess'))
								this.open = false
								this.getList()
							} else {
								this.msgError(response.msg)
							}
						})
					}
				}
			})
		},
		/** 下载进度操作 */
		handleProgress(row) {
			this.deviceCode = row.deviceCode
			this.dOpen = true
			this.loadingP = true
			this.dloadId = row.id
			this.getResDload()
		},
		getResDload() {
			resDloadList({ dloadId: this.dloadId, deviceCode: this.deviceCode }).then(
				(response) => {
					this.resDloadList = response.data
					this.loadingP = false
				}
			)
		},
		/** 删除按钮操作 */
		handleDel(row) {
			const ids = row.id || this.ids
			this.$confirm(
				this.$t('program.deleteProgram') +
					ids +
					this.$t('equipment.deleteEquipment2'),
				this.$t('warning'),
				{
					confirmButtonText: this.$t('submitText'),
					cancelButtonText: this.$t('cancelText'),
					type: 'warning',
				}
			)
				.then(function() {
					return delDownload(ids)
				})
				.then(() => {
					this.getList()
					this.msgSuccess(this.$t('deleteSuccess'))
				})
				.catch(function() {})
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams
			this.$confirm(
				this.$t('program.exportAllProgramDlData'),
				this.$t('warning'),
				{
					confirmButtonText: this.$t('submitText'),
					cancelButtonText: this.$t('cancelText'),
					type: 'warning',
				}
			)
				.then(function() {
					return exportDownload(queryParams)
				})
				.then((response) => {
					this.download(response.data)
				})
				.catch(function() {})
		},
		handleResend(row) {
			const ids = row.id || this.ids
			this.$confirm(
				this.$t('program.enterResetNumber') +
					ids +
					this.$t('equipment.deleteEquipment2'),
				this.$t('warning'),
				{
					confirmButtonText: this.$t('submitText'),
					cancelButtonText: this.$t('cancelText'),
					type: 'warning',
				}
			)
				.then(function() {
					return resend(ids)
				})
				.then(() => {
					this.getList()
					this.msgSuccess(this.$t('operationSuccess'))
				})
				.catch(function() {})
		},
	},
}
</script>
